<template>
  <section id="information">
    <div class="informationHeader">
      <div
        v-for="(list,index) in rowCount"
        :key="index"
        :class="{bottomDiv:list.rowD}"
        @click="clickUser(index)"
      >
        <span>{{list.text}}</span>
      </div>
    </div>
    <div class="placeholderTop"></div>
    <InformationList :ident="ident"></InformationList>
    <div class="placeholderbottom"></div>
    <div class="informationBottom">
      <div>
        <svg class="icon iconsty" aria-hidden="true">
          <use xlink:href="#icon-test361"></use>
        </svg>
        <span>全部已读</span>
      </div>
      <div>
        <svg class="icon iconsty" aria-hidden="true">
          <use xlink:href="#icon-test307"></use>
        </svg>
        <span>显示全部</span>
      </div>
    </div>
  </section>
</template>

<script>
import InformationList from '@/components/common/informationList/InformationList'
export default {
  components: {
    InformationList
  },
  data () {
    return {
      rowCount: [{ text: '订单消息', rowD: true }, { text: '客户咨询', rowD: false }, { text: '企业公告', rowD: false }, { text: '系统公告', rowD: false }],
      // 当前选中标识
      ident: 0
    }
  },
  methods: {
    clickUser (index) {
      var rowCountb = this.rowCount
      for (var i = 0; i < rowCountb.length; i++) {
        if (i === index) {
          rowCountb[i].rowD = true
        } else {
          rowCountb[i].rowD = false
        }
      }
      this.rowCount = rowCountb
      this.ident = index
    }
  }
}
</script>

<style lang="scss" scoped>
#information {
  position: absolute;
  right: 15px;
  top: 60px;
  z-index: 10;
  width: 460px;
  height: 490px;
  background-color: #ffffff;
  box-shadow: 2px 2px 5px #adadad;
}
.informationHeader {
  position: absolute;
  top: 0;
  z-index: 11;
  width: 100%;
  height: 48px;
  border-bottom: 1px solid #e3e3e3;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  color: #333333;
  font-size: 16px;
}
.informationHeader > div {
  width: 90px;
  height: 44px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.informationHeader > div:hover {
  cursor: pointer;
}
.bottomDiv {
  border-bottom: 3px solid #20ade5;
  color: #20ade5;
}
.informationBottom {
  position: absolute;
  bottom: 0;
  z-index: 10;
  background-color: #ffffff;
  border-top: 1px solid #e3e3e3;
  width: 100%;
  height: 48px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  color: #20ade5;
}
.informationBottom > div {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.informationBottom > div > span {
  margin-left: 8px;
}
.placeholderTop {
  width: 100%;
  height: 49px;
}
.placeholderbottom {
  width: 100%;
  height: 49px;
}
</style>
